<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.7.1.js"></script>
    <style>
        .content{
            width: 500px;
            height: 400px;
            border: 1px solid paleturquoise;
            margin: auto;
            background-size: cover;
            
        }
        .cai{
            margin-top: 10px;
            border: 1px solid white;
        }
        h2{
         text-align: center;
        }
        .nums{
            border: 1px solid pink;
        }
        .header-right,.header-left{
            border: 1px solid white;
            flex: 1;
        }
        .header{
            display: flex;
        }
        .details{
            display: flex;
            display: none;
        }
        .w02{
            text-align: center;
        }

    </style>
</head>
<body>
    <div class="content">
        <h2>小胖快餐</h2>
        <div class="cai">
            <div class="header">
                <div class="header-left">
                    1.<input type="checkbox" name=""id=""value="1">凉菜(价格:5元)
                </div>
                <div class="header-right">
                    数量：<input type="text" class="nums" value="1">
                    价格：<span class="price">0</span>元</div>
            </div>
            <div class="details">
                <input type="radio"name="liangcai" checked>凉拌猪头肉
                <input type="radio"name="liangcai">皮蛋豆腐
                <input type="radio"name="liangcai">拍黄瓜
                <input type="radio"name="liangcai">花生碟
            </div>
        <div class="cai">
            <div class="header">
                <div class="header-left">
                    2.<input type="checkbox" name=""id="" value="1">素菜(价格:6元)
                </div>
                <div class="header-right">
                    数量：<input type="text" class="nums" value="1">
                    价格：<span class="price">0</span>元</div>
            </div>
            <div class="details">
                <input type="radio"name="sucai"id="">爆炒土豆丝
                <input type="radio"name="sucai"id="">西红柿炒鸡蛋
                <input type="radio"name="sucai"id="">西蓝花
                <input type="radio"name="sucai"id="">红烧肉焖豆角
            </div>  
            <div class="cai">
                <div class="header">
                    <div  class="header-left">
                        3.<input type="checkbox" name=""id=""value="1">荤菜(价格:10元)
                    </div>
                    <div class="header-right">
                        数量：<input type="text" class="nums" value="1">
                        价格：<span class="price">0</span>元</div>
                </div>
                <div class="details">
                    <input type="radio"name="huncai"id="">爆炒牛肉
                    <input type="radio"name="huncai"id="">地锅鸡
                    <input type="radio"name="huncai"id="">蒜蓉小龙虾
                    <input type="radio"name="huncai"id="">红烧排骨
                </div>  
        </div>
        <div>
            合计:<span class="tota">0</span>元
        </div>
    </div>
</body>
<script>
    function counttota(){
        var tota =0;
    $(".price").each(function(k,v){
        var price =$(this).text()
        tota =parseInt(tota)+parseInt(price)
    })
    $(".tota").text(tota)
    }

    $(".nums").blur(function(){
        var nums =$(this).val()
        var danjia=$(this).next().attr("danjia")
        $(this).next().text(nums * danjia)
        counttota()
    })


    $("input[type=checkbox]").click(function(){
        var ischeck = $(this).filter(":checked").val();
        if(ischeck ==1){
        $(this).parent().parent().next().show()
            var nums=$(this).parent().next().children().eq(0).val();
            var price=$(this).parent().next().children().eq(1).attr("danjia");
            $(this).parent().next().children().eq(1).text(nums * price)
        }else{
            $(this).parent().parent().next().hide() 
            $(".details").hide();
            $(this).parent().next().children().eq(1).text(0)
        }
        counttota()
    })
</script>
</html>